<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位-1</title>
    <style>
        /* p {
            height: 200px;
            width: 200px;
            border: 1px solid rosybrown
        } */

        p span {
            background-color: #ccc;
            display: inline-block;
            height: 50px;
            width: 50px;
        }

        #head {
            border: 1px #CCC solid;
            width: 410px;
            height: 100px;
            margin-bottom: 10px;
        }

        #main {
            border: 1px #CCC solid;
            width: 400px;
            /* height: 200px; */
            margin-bottom: 10px;
            padding: 5px;
        }

        #left {
            border: 1px #CCC solid;
            background-image: url(https://cn.bing.com/th?id=OIP.LtfmmMSd06YANkFLcU_GcQAAAA&pid=Api&rs=1);
            width: 50px;
            height: 50px;
            float: left;
            margin-right: 10px;
        }

        #right {
            border: 1px #CCC solid;
            width: 193px;
            height: 198px;
            margin-left: 5px;
            float: left;
        }

    </style>
</head>

<body>
    <h1>定位</h1>
    <!-- <section>
        <h2>元素分类</h2>
        <p>block</p>
        <p>Lorem <span>ipsum</span> dolor sit amet consectetur adipisicing elit. Ipsum provident tenetur at rem. Dolorum
            delectus tenetur necessitatibus rem ab aut, numquam totam at quam fugit laudantium. Architecto eum sapiente
            quos.</p>

    </section>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi culpa vitae mollitia amet architecto quod, ipsum
    ut pariatur itaque ratione! At assumenda dolor quam quidem libero ab nostrum repellendus optio? -->

    <div id="head">头部</div>
    <div id="main">
        <div id="left"></div>
        <div style="clear:both;"></div>
        <!-- <div id="right">右侧</div> -->
        汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字
    </div>
</body>

</html>
